<template>
  <div>
    <div class="zongglan">
      <div class="title">整体状况</div>
      <div class="data">
        <div class="box">
          <div class="top">
            <span style="color:aqua">·</span>
            订单总数
          </div>
          <div class="num">{{orderNum}}</div>
        </div>
        <div class="box">
          <div class="top">
            <span style="color:#ff9100">·</span>
            商品总数
          </div>
          <div class="num">{{goodsNum}}</div>
        </div>
        <div class="box">
          <div class="top">
            <span style="color:#4c00ff">·</span>
            缺货商品数
          </div>
          <div class="num">{{noGoods}}</div>
        </div>
        <div class="box">
          <div class="top">
            <span style="color:#00ff0d">·</span>
            未发货
          </div>
          <div class="num">{{noSend}}</div>
        </div>
        <div class="box">
          <div class="top">
            <span style="color:#ff00b3">·</span>
            未付款
          </div>
          <div class="num">{{noPay}}</div>
        </div>
      </div>
    </div>
    <!-- 2.为Echarts准备一个Dom -->
    <div class="shanxingtu">
      <div id="main1" style="width: 250px;height:250px;"></div>
      <div id="main2" style="width: 250px;height:250px;"></div>
      <div id="main3" style="width: 250px;height:250px;"></div>
    </div>
    <div class="zhuzhuangtu">
      <div id="main4" style="width: 50%;height:340px;"></div>
      <div id="main5" style="width: 50%;height:340px;"></div>
    </div>
  </div>
</template>

<script>
// 1.导入echarts
import echarts from 'echarts'

export default {
  data() {
    return {
      orderNum: 0,
      goodsNum: 0,
      noSend: 0,
      noPay: 0,
      noGoods: 0
    }
  },
  // 此时,页面上的元素,已经被渲染完毕了
  async mounted() {
    //显示扇形图表2
    var mychart1 = echarts.init(document.getElementById('main1'), 'light');
    const { data: res } = await this.$http.get('goods', {
      params: {
        query: '',
        pagenum: 1,
        pagesize: 999
      }
    })
    let goodsList = res.data.goods
    let haveGoods = 0
    let noGoods = 0
    for (let index = 0; index < goodsList.length; index++) {
      const element = goodsList[index];
      if (element.goods_number === 0) {
        noGoods++
      } else {
        haveGoods++
      }
    }
    this.goodsNum = goodsList.length
    this.noGoods = noGoods
    var option1 = {
      title: {
        text: '商品库存状态',
        left: 'left'
      },
      tooltip: {
        trigger: 'item'
      },
      legend: {
        orient: 'vertical',
        left: 'right'
      },
      series: [
        {
          // name: 'Access From',
          type: 'pie',
          // radius: '50%',
          data: [
            { value: noGoods, name: '缺货商品' },
            { value: haveGoods, name: '有货商品' },
          ],
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          },
          label: {
            show: true,
            position: 'inner',
            formatter: '{d}%'
          },
        }
      ]
    };
    // 使用刚指定的配置项和数据显示图表。
    mychart1.setOption(option1);

    const { data: res1 } = await this.$http.get('orders', {
      params: {
        query: '',
        pagenum: 1,
        pagesize: 999
      }
    })
    let orderList = res1.data.goods
    let revOrderList = orderList.reverse()
    let isSend = 0
    let noSend = 0
    let isPay = 0
    let noPay = 0
    for (let index = 0; index < orderList.length; index++) {
      const element = orderList[index];
      if (element.pay_status === '0') {
        noPay++
      }
      if (element.pay_status === '1') {
        isPay++
      }
      if (element.pay_status === '1' && element.is_send === '否') {
        noSend++
      }
      if (element.pay_status === '1' && element.is_send === '是') {
        isSend++
      }
    }
    this.orderNum = orderList.length
    this.noSend = noSend
    this.noPay = noPay
    // let timeData = []
    // let orderData = []
    // let newDate = new Date()
    // var month = newDate.getMonth() + 1;
    // var day = newDate.getDate();


    // let dateWeek = []
    // const date = new Date()
    // for (var i = 0; i < 7; i++) {
    //   let newDate = new Date(date.getTime() + i * 1000 * 60 * 60 * 24)
    //   let year = newDate.getFullYear()
    //   let month = (parseInt(newDate.getMonth()) + 1) > 9 ? (parseInt(newDate.getMonth()) + 1) : "0" + (parseInt(newDate.getMonth()) + 1)
    //   let day = (newDate.getDate()) > 9 ? newDate.getDate() : "0" + newDate.getDate()
    //   let fullDate = `${year}-${month}-${day}`
    //   dateWeek.push(fullDate)
    // }
    // console.log(dateWeek)

    var myDate = new Date();
    var year = new Date().getFullYear();
    myDate.setDate(myDate.getDate() - 7);
    var dateArray = [];
    var dateTemp;
    var flag = 1;
    for (var i = 0; i < 7; i++) {

      var month = myDate.getMonth() + 1
      month = month < 10 ? '0' + month : month
      var date = myDate.getDate() < 10 ? '0' + myDate.getDate() : myDate.getDate()
      // dateTemp = (myDate.getMonth()+1)+"-"+myDate.getDate();
      // var year= (year+1)
      // 判断是不是相差年份
      if (i != 0 && (month + "-" + date) == "01-01") {
        year++
      }
      dateTemp = year + "-" + month + "-" + date;
      dateArray.push(dateTemp);
      myDate.setDate(myDate.getDate() + flag);
    }
    console.log(dateArray, dateTemp)

    // for (let index = 0; index < revOrderList.length; index++) {
    //   const element = revOrderList[index];

    // }

    var mychart2 = echarts.init(document.getElementById('main2'), 'light');

    var option2 = {
      title: {
        text: '订单支付状态',
      },
      tooltip: {
        trigger: 'item'
      },
      legend: {
        orient: 'vertical',
        left: 'right',
      },
      series: [
        {
          // name: 'Access From',
          type: 'pie',
          // radius: '50%',
          data: [
            { value: noPay, name: '未支付订单' },
            { value: isPay, name: '已支付订单' }
          ],
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          },
          label: {
            show: true,
            position: 'inner',
            formatter: '{d}%'
          },
        }
      ]
    };
    // 使用刚指定的配置项和数据显示图表。
    mychart2.setOption(option2);

    var mychart3 = echarts.init(document.getElementById('main3'), 'light');
    var option3 = {
      title: {
        text: '订单发货状态',
      },
      tooltip: {
        trigger: 'item'
      },
      legend: {
        orient: 'vertical',
        left: 'right',
      },
      series: [
        {
          // name: 'Access From',
          type: 'pie',
          // radius: '50%',
          data: [
            { value: noSend, name: '未发货订单' },
            { value: isSend, name: '已发货订单' }
          ],
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          },
          label: {
            show: true,
            position: 'inner',
            formatter: '{d}%'
          },
        }
      ]
    };
    // 使用刚指定的配置项和数据显示图表。
    mychart3.setOption(option3);

    var mychart4 = echarts.init(document.getElementById('main4'), 'light');
    for (var i = 0; i < goodsList.length; i++) {
      for (var j = i + 1; j < goodsList.length; j++) {
        if (goodsList[i].hot_mumber < goodsList[j].hot_mumber) {
          var temp = goodsList[i];
          goodsList[i] = goodsList[j];
          goodsList[j] = temp;
        }
      }
    }
    let hotNum = []
    let goodsName = []
    for (let index = 0; index < goodsList.length; index++) {
      const element = goodsList[index];
      goodsName.push(element.goods_name)
      hotNum.push(element.hot_mumber)
    }
    let goodsName1 = goodsName.slice(0,7)
    let hotNum1 = hotNum.slice(0,7)
    var option4 = {
      title: {
        text: '热卖商品',
        left: 'left'
      },
      xAxis: {
        type: 'category',
        data: goodsName1,
        axisLabel: { interval: 0, rotate: 20 }
      },
      yAxis: {
        type: 'value',
        name: '件'
      },
      series: [
        {
          data: hotNum1,
          type: 'bar',
          label: {
            show: true
          },
        },
      ]
    };
    mychart4.setOption(option4);

    var mychart5 = echarts.init(document.getElementById('main5'), 'light');
    let newArr = JSON.parse(JSON.stringify(goodsList))
    for (var i = 0; i < newArr.length; i++) {
      for (var j = i + 1; j < newArr.length; j++) {
        if (newArr[i].goods_number > newArr[j].goods_number) {
          var temp = newArr[i];
          newArr[i] = newArr[j];
          newArr[j] = temp;
        }
      }
    }
    let goodsNum = []
    let goodsNamee = []
    for (let index = 0; index < newArr.length; index++) {
      const element = newArr[index];
      goodsNamee.push(element.goods_name)
      goodsNum.push(element.goods_number)
    }
    let goodsNamee1 = goodsNamee.slice(0,7)
    let goodsNum1 = goodsNum.slice(0,7)
    var option5 = {
      title: {
        text: '商品库存',
        left: 'left'
      },
      xAxis: {
        type: 'category',
        data: goodsNamee1,
        axisLabel: { interval: 0, rotate: 20 }
      },
      yAxis: {
        type: 'value',
        name: '件'
      },
      series: [
        {
          data: goodsNum1,
          type: 'bar',
          label: {
            show: true
          },
        },
      ]
    };
    mychart5.setOption(option5);

    // // 3.基于准备好的dom，初始化echarts实例
    // var myChart = echarts.init(document.getElementById('main'))
    // // 4.准备数据项和配置项
    // // 指定图表的配置项和数据
    // var option = {
    //   legend: {},
    //   tooltip: {
    //     trigger: 'axis',
    //     showContent: false
    //   },
    //   dataset: {
    //     source: [
    //       ['product', '2012', '2013', '2014', '2015', '2016', '2017'],
    //       ['Matcha Latte', 41.1, 30.4, 65.1, 53.3, 83.8, 98.7],
    //       ['Milk Tea', 86.5, 92.1, 85.7, 83.1, 73.4, 55.1],
    //       ['Cheese Cocoa', 24.1, 67.2, 79.5, 86.4, 65.2, 82.5],
    //       ['Walnut Brownie', 55.2, 67.1, 69.2, 72.4, 53.9, 39.1]
    //     ]
    //   },
    //   xAxis: { type: 'category' },
    //   yAxis: { gridIndex: 0 },
    //   grid: { top: '55%' },
    //   series: [
    //     { type: 'line', smooth: true, seriesLayoutBy: 'row' },
    //     { type: 'line', smooth: true, seriesLayoutBy: 'row' },
    //     { type: 'line', smooth: true, seriesLayoutBy: 'row' },
    //     { type: 'line', smooth: true, seriesLayoutBy: 'row' },
    //     {
    //       type: 'pie',
    //       id: 'pie',
    //       radius: '30%',
    //       center: ['50%', '25%'],
    //       label: {
    //         formatter: '{b}: {@2012} ({d}%)'
    //       },
    //       encode: {
    //         itemName: 'product',
    //         value: '2012',
    //         tooltip: '2012'
    //       }
    //     }
    //   ]
    // }

    // myChart.on('updateAxisPointer', function (event) {
    //   var xAxisInfo = event.axesInfo[0]
    //   if (xAxisInfo) {
    //     var dimension = xAxisInfo.value + 1
    //     myChart.setOption({
    //       series: {
    //         id: 'pie',
    //         label: {
    //           formatter: '{b}: {@[' + dimension + ']} ({d}%)'
    //         },
    //         encode: {
    //           value: dimension,
    //           tooltip: dimension
    //         }
    //       }
    //     })
    //   }
    // })
    // // 数据合并
    // //  const result = _.merge(res.data, this.options)
    // // 5.展示数据
    // myChart.setOption(option)
  }
}
</script>

<style lang="less">
div {
  margin: 0;
  padding: 0;
}
.zongglan {
  background-color: #fff;
  margin-bottom: 20px;
  .title {
    font-size: 22px;
    line-height: 50px;
    border-bottom: 1px solid #ccc;
    padding-left: 20px;
  }
  .data {
    display: flex;
    justify-content: space-around;
    text-align: center;
    .box {
      height: 110px;
      .top {
        position: relative;
        margin-top: 10px;
        font-size: 18px;
        line-height: 20px;
        span {
          font-size: 60px;
          position: absolute;
          left: -18px;
        }
        span:nth-child(1) {
          color: aqua;
        }
      }
      .num {
        font-size: 50px;
        // font-weight: 700;
        line-height: 80px;
      }
    }
  }
}
.shanxingtu {
  display: flex;
  justify-content: space-around;
  background-color: #fff;
  padding-top: 20px;
}
.zhuzhuangtu {
  display: flex;
  justify-content: space-around;
  padding-top: 10px;
  background-color: #fff;
  margin-top: 20px;
}
</style>
